<!-- 卡片>视频个数和物联设备 -->
<template>
<div class="columnChart">
    <div class="eq-content">
        <div class="item" @click="jumpToEqPage(3)">
            <div class="left">
                <img src="@/assets/images/homeLeft/eq-vedio.png" alt="">
            </div>
            <div class="right">
                <div class="tittle">视频总数</div>
                <div class="num">{{ videoCount }}</div>
            </div>
        </div>
        <div class="item" @click="jumpToEqPage()">
            <div class="left">
                <img src="@/assets/images/homeLeft/ew-sys.png" alt="">
            </div>
            <div class="right">
                <div class="tittle">物联设备</div>
                <div class="num">{{ deviceCount }}</div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { getOrgAllCount } from "@/api/organization"
export default {
  data() {
    return {
      videoCount:0,
      deviceCount:0,
      orgIds:this.$store.state.userInfo.organizationIds
    }
  },
  methods: {  
    getUnitNumber(){
        let that = this;
        getOrgAllCount({
          orgIds:that.orgIds,
          countTypes:"11,12",
        }).then(res => {
            that.videoCount = res.data.videoCount || 0
            that.deviceCount = res.data.deviceCount || 0
        })
    },
    //跳转》设备一张图
    jumpToEqPage(markType){
        let that = this;
        that.$Ctl.enterChild('MapEquipment',{
          markType: markType || 0,
          orgIds: that.orgIds
        })
    }
  },
  components: {},
  created() {
    let that = this; 
    that.getUnitNumber();
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.columnChart{
    height: 100%;
    width: 100%;
    font-size: 16px;
    .eq-content{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        .item{
          display: flex;
          align-items: center;
          background-color: rgba(29, 53, 84, 0.4);
          padding-right: 3%;
          margin: 10px 0;
          margin-right: 25px;
          cursor: pointer;
          width: 45%;
          cursor: pointer;
          &:nth-child(even){
            margin-right: 0;
          }
          .tittle{
            font-size: 1.125em;
            color: #A3BEDD;
          }
          .num{
            font-size: 1.6em;
            color: #fff;
          }
          .right{
            min-width: 85px;
          }
        }
    }
}
</style>